<template>
   <el-table :data="data" :height="height" border style="width: 100%">
    <el-table-column type="index" width="60" label="序号"/>
    <template v-for="(item, index) in columns" :key="item.prop">
      <el-table-column class="text-center" v-if="item.type === 'image'" :label="item.label" :width="item.width">
        <template #default="scope">
          <img :src="scope.row[item.prop]" alt="" />
        </template>
      </el-table-column>

      <el-table-column class="text-center" v-else-if="item.type === 'operation'" fixed="right" :label="item.label" :width="item.width">
        <template #default="scope">
          <el-button v-for="btn in item.children" :key="btn.label" link :type="btn.type" size="small" @click="handleClick(btn.label, scope.row)">
            {{ btn.label }}
          </el-button>
        </template>
      </el-table-column>

      <!-- <el-table-column v-else :prop="item.prop" :label="item.label" :width="item.width" /> -->
      <el-table-column v-else :prop="item.prop" :label="item.label" :width="item.width">
        <template #default="scope">
          <!-- 判断是否需要格式化时间 -->
          <span v-if="isTimeColumn(item.prop)">
            {{ formatTime(scope.row[item.prop]) }}
          </span>
          <span v-else>
            {{ scope.row[item.prop] }}
          </span>
        </template>
      </el-table-column>
    </template>
  </el-table>
<section class="flex pagition">

      <div>
        <span @click="currentPage > 1 && goToPage(currentPage = currentPage * 1 - 1)">上一页</span>

          <span v-for="page in totalPages" :key="page" :class="{ active: page === currentPage }" @click="goToPage(page)">
            {{ page }}
          </span>
        <span @click="currentPage < totalPages.length && goToPage(currentPage = currentPage * 1 + 1)">下一页</span>

      </div>
      <div>
        <span>总条数：{{ total }}</span>
      </div>
</section>
</template>

<script lang='ts' setup>
import dayjs from 'dayjs';
const props = defineProps<{ data:any[], columns:any[], total?: number }>()
const emit = defineEmits(['handleClick', 'handleChange'])
const handleClick = (btn:string, row:any) => {
  emit('handleClick', btn, row)
}

const currentPage = ref(1);
const pageSize = ref(10);
const height = ref<number | null>(null); // 用于存储表格的高度
  const pagedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return props.data.slice(start, end);
});
const array = ref<any[]>([]);
const totalPages = computed(() => {
  const tp = Math.ceil((props.total || props.data.length) / pageSize.value);
  if(tp > 5) {

    array.value = Array.from({ length: tp }, (_, index) => index + 1).slice(currentPage.value - 1, currentPage.value + 4);
    return array.value
  } else {
    return Array.from({ length: tp }, (_, index) => index + 1)
  }

});


const goToPage = (page: number) => {
  console.log(page, currentPage.value)
  // if (page !== currentPage.value) {
    currentPage.value = page;
    emit('handleChange', currentPage.value);
  // }
};
onMounted(() => {
  height.value = 440
})

watch(() => props.data, (newData) => {
  // currentPage.value = 1; // 数据变化时重置到第一页
});
// 判断是否是时间列
const isTimeColumn = (prop: string) => ['createTime', 'updateTime'].includes(prop);

// 格式化时间
const formatTime = (time: string) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
};
</script>

<style  lang='stylus'>
.el-table .cell {
  white-space: nowrap;
}
.el-table .cell img {
  width: 50px;
  height: 30px;
}
.pagition {
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
  span {
    margin: 0 5px;
    cursor: pointer;
    &.active {
      font-weight: bold;
      color: blue;
    }
  }
}


</style>